<template>
  <div class="toplist-detail-container">
    <header class="t-detail">
      <div class="detail-img"><img :src="imgSrc" alt="" /></div>
      <div class="detail-info">
        <h3>{{ name }}</h3>
        <p class="update-time">最近更新：10月05日 <span>(刚刚更新)</span></p>
        <ul>
          <li style="background: #2071c0; color: #fff">播放</li>
          <li class="two-li">{{ subscribedCount }}</li>
          <li>{{ shareCount }}</li>
          <li>下载</li>
          <li>{{ commentCount }}</li>
        </ul>
      </div>
    </header>
    <div class="sing-list">
      <h2>歌曲列表</h2>
      <span class="sing-num">100首歌</span>
      <b>播放：<span>5204457984</span>次 </b>
    </div>
    <table class="sing-tab">
      <thead>
        <tr>
          <td></td>
          <td>标题</td>
          <td>时长</td>
          <td>歌手</td>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script>
import { playListDetailApi } from "@/requset/api";
export default {
  data() {
    return {
      playlist: null,
      imgSrc: "", // 图片
      name: "", // 详情名字
      commentCount: 0, // 评论数
      shareCount: 0, //分享数
      subscribedCount: 0,
    };
  },
  methods: {},
  created() {
    if (this.$route.query.id !== undefined) {
      // 发送请求 获取歌单详情
      playListDetailApi(this.$route.query.id).then(({ data: res }) => {
        this.playlist = res.playlist;
        this.imgSrc = res.playlist.coverImgUrl;
        this.name = res.playlist.name;
        this.shareCount = res.playlist.shareCount;
        this.subscribedCount = res.playlist.subscribedCount;
        this.commentCount = res.playlist.commentCount;
      });
    } else {
      // 默认清空 发送请求 获取歌单详情
      playListDetailApi(19723756).then(({ data: res }) => {
        this.playlist = res.playlist;
        this.imgSrc = res.playlist.coverImgUrl;
        this.name = res.playlist.name;
        this.shareCount = res.playlist.shareCount;
        this.subscribedCount = res.playlist.subscribedCount;
        this.commentCount = res.playlist.commentCount;
      });
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/base.less";
.toplist-detail-container {
  padding: 0 40px;
  .t-detail {
    display: flex;
    margin-top: 40px;
    .detail-img {
      width: 150px;
      height: 150px;
      background-color: rosybrown;
      margin-right: 30px;
      img {
        width: 100%;
      }
    }
    .detail-info {
      flex: 1;
      h3 {
        margin: 15px 0;
        font-size: 18px;
      }
      .update-time {
        font-size: 12px;
        color: #666666;
        margin-bottom: 30px;
        span {
          color: #999999;
        }
      }
      ul {
        display: flex;
        li {
          margin-right: 10px;
          background-color: #f9f9f9;
          padding: 7px 10px;
          border: 1px solid #c4c4c4;
          border-radius: 5px;
          font-size: 12px;
          cursor: pointer;
          &:hover {
            border: 1px solid #dedddd;
            background-color: #f8f8f8;
          }
        }
        .two-li {
          background: #e8e8e8;
          color: #bebebe;
          cursor: default;
          &:hover {
            border: 1px solid #c4c4c4;
            background: #e8e8e8;
          }
        }
      }
    }
  }
  .sing-list {
    margin-top: 60px;
    border-bottom: 2px solid @red;
    padding-bottom: 10px;
    h2 {
      display: inline-block;
      font-size: 20px;
      margin-right: 10px;
    }
    .sing-num {
      font-size: 12px;
      color: #666666;
    }
    b {
      margin-top: 8px;
      font-size: 12px;
      float: right;
      span {
        color: @red;
        font-weight: 700;
      }
    }
  }
  .sing-tab {
    background: #fafafa;
    width: 100%;
    border: 1px solid #000;
    border-top: none;
    thead td {
      border-left: 1px solid #d4d4d4;
    }
  }
}
</style>